<template>
    <div>
      <div id="head">
        <van-icon class="biao" size="25px" @click="toShou()" name="arrow-left" />
          能耗统计
      </div>
      <div id="xuan">
        <el-radio-group  v-model="form.deviceEnergy" @change="findByType">
          <el-radio-button label="电" ></el-radio-button>
          <el-radio-button label="水"></el-radio-button>
          <el-radio-button label="燃气"></el-radio-button>
        </el-radio-group>
      </div>
      <div>
        <div id="form">
          <span style="font-size: 15px;padding-left: 25px;padding-right: 18px">选择设备:</span>
          <el-select v-model="form.deviceId" placeholder="请选择" @change="findDevice">
            <el-option
                v-for="d in device"
                :key="d.deviceName"
                :label="d.deviceName"
                :value="d.deviceId">
            </el-option>
          </el-select>
        </div>
        <van-field
            label="设备编号："
            placeholder="请输入设备编号"
            :value="one.deviceCode"
        />
        <van-field
            label="设备位置："
            placeholder="请输入设备位置"
            :value="one.deviceAddress"
        />
        <van-field
            label="设备分类："
            placeholder="请输入设备分类"
            :value="one.deviceType"
        />
      </div>
      <div id="daily">
        <el-radio-group  v-model="form.timeType" size="small" @change="findByTime">
          <el-radio-button label="日" ></el-radio-button>
          <el-radio-button label="月"></el-radio-button>
          <el-radio-button label="年"></el-radio-button>
        </el-radio-group>
      </div>
      <div id="zhu" ref="chars" style="height: 500px;width:100%;"></div>
    </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts'
  export default {
    data(){
      return{
        form:{
          deviceEnergy:"电",
          timeType:"日",
        },
        device:[],
        one:{},
        joints:['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        usage:["100", "120", "80", "50", "90", "140", "30", "20", "110", "130", "146", "120", "90", "70", "100", "130", "150", "120", "100", "80", "90", "110", "130", "120"],
      }
    },
    methods:{
      findByTime(){
        this.findUsage();
        this.findJoint();
        this.showImg();
      },
      findByType(){
        this.findUsage();
        this.findJoint();
        this.showImg();
      },
      showImg(){
        const myChart = echarts.init(this.$refs.chars);
        const option={
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: this.joints,
            },
          ],
          series: [
            {
              name: '用量',
              type: 'bar',
              data: this.usage,
            }
          ]
        }
        myChart.setOption(option)
      },
      findUsage(){
        axios.post("http://localhost:9999/daily/findUsage",this.form).then(res=>{
          this.usage = res.data;
        })
      },
      findJoint(){
        axios.post("http://localhost:9999/daily/findJoint",this.form).then(res=>{
          this.joints = res.data;
        })
      },
      findDaily(){
        axios.post("http://localhost:9999/daily/findAll",this.form).then(res=>{

        })
      },
      findDevice(){
        const id = this.form.deviceId;
        axios.post("http://localhost:9999/device/getOne?id="+id).then(res=>{
          this.one = res.data;
          this.findDaily();
          this.findJoint();
          this.findUsage();
          this.showImg();
        })
        this.showImg();
      },
      findAll(){
        axios.post("http://localhost:9999/device/findAll").then(res=>{
          this.device=res.data
        })
      },
      toShou(){
        this.$router.push('/')
      }
    },
    created(){
      this.findAll();
      this.findDaily();
    },
  }
</script>
<style scoped>
#daily{
  width: 100%;
  float: left;
  display: flex;
  justify-content: right;
}
#form{
  float: left;
}
#zhu{
  float: left;
}
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  float: left;
}
.biao{
float: left;
}
#xuan{
  width: 100%;
  height: 40px;
  float: left;
  display: flex;
  margin-top: 10px;
  justify-content: center;
}
</style>
